<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" class="myinput">
    <script>
        // 防抖： debounce ： 在一段时间内执行一次，如果在时间间隔内执行 ，那么会重新计时；
        // 节流 ： trottle ： 在一段间隔时间内不停的执行；（控制频率的）;
        var myinputEle = document.querySelector(".myinput");


        // 非通用版本节流
        // var startTime = new Date().getTime();
        // myinputEle.oninput = function(){
        //     // console.log(this.value);
        //     var endTime = new Date().getTime();
        //     if((endTime-startTime)>500){  // 如果时间差 大于间隔时间 那么就执行 ，否则就不执行函数；
        //         console.log(this.value);
        //         startTime = new Date().getTime();
        //     }
        // }


        myinputEle.oninput = trottle(function () {
            console.log(this.value);
        },500)

        // 节流函数
        function trottle(fn, delay) {
            var startTime = new Date().getTime();
            return function () {
                var endTime = new Date().getTime();
                if ((endTime - startTime) > delay) {  // 如果时间差 大于间隔时间 那么就执行 ，否则就不执行函数；
                    fn.apply(this);
                    // fn();
                    startTime = new Date().getTime();
                }
            }
        }

        document.onmousemove = trottle(function(){
            console.log("move");
        },500);

        window.onresize = trottle( function(){
            console.log("resize");
        },500);

        // 防抖：类似 游戏技能 ，释放前的摇；
        // 节流： 类似 技能的cd；
// https://www.lodashjs.com/docs/lodash.throttle#_throttlefunc-wait0-options  lodash.js
// https://underscorejs.net/ 
// https://www.swiper.com.cn/usage/index.html 
    </script>
</body>

</html>